<template>
  <div class="screen_item flex">
    <span class="screen_tit">{{selectTitle}}：</span>
    <el-popover :width="popoverWidth"
                @show="get_screen_list(paramsList.ajaxUrl, paramsList.jsonName, paramsList.ajaxType)" class="cp"
                placement="bottom"
                trigger="click">
            <span class="flex screen_con_span" slot="reference">
              <template v-if="selectDateArr.id_str">
                <span class="color_blue" v-if="selectDateArr.screen_bl">{{selectDateArr.screen_num}}</span>
                <span class="color_blue" v-else>{{selectDateArr.name_str}}</span>
              </template>
              <template v-else>全部</template>
              <img src="@/assets/images/link17/common/sanjiao_gray.png">
            </span>
      <div class="more_select_box">
        <div @click.stop class="loading popover_loading" v-if="popover_loading">
          <div class="loading_content"></div>
        </div>
        <div class="more_select_list scroll" v-else>
          <el-tree :check-on-click-node="true" :data="selectDateArr.list" :node-key="paramsList.treeNodeKey"
                   :props="{label: paramsList.treeLable}" class="filter-tree" highlight-current ref="screen_group"
                   show-checkbox>
          </el-tree>
          {{paramsList.jsonName}}
        </div>
        <div class="more_select_btn">
          <button @click="popoverReset('selectDateArr')">重置</button>
          <button @click="popoverSub('selectDateArr','groupid','groupName')" class="determine">确定
          </button>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script>
  import {
    getCommonData
  } from '@/api/index'

  var _this
  export default {
    name: 'DropDownSelect',

    data() {
      return {
        authId: '',
        popover_loading: false //筛选框下拉加载
      }
    },
    props: {
      // 标题
      selectTitle: {
        type: String,
        default: ''
      },
      // 标题
      ajaxUrl: {
        type: String,
        default: ''
      },
      // 标题
      jsonName: {
        type: String,
        default: ''
      },
      // 标题
      ajaxType: {
        type: String,
        default: ''
      },
      // 宽度
      popoverWidth: {
        type: String,
        default: '200'
      },
      paramsList: {
        type: Object,
        default: () => {
          return {
            ajaxUrl: '',
            jsonName: '',
            ajaxType: '',
            treeLable: '',
            treeNodeKey: ''
          }
        }
      },
      selectDateArr: {
        type: Object,
        default: () => {
          return {
            screen_name: '',
            screen_bl: false,
            screen_num: 0,
            list: [],
            name_str: '',
            id_str: '',
            id_list: [],
            currency: ''
          }
        }
      }
    },
    created: function() { //html加载完成之前
      _this = this
      _this.authId = sessionStorage.getItem('cloud_authId')
    },
    watch: {},
    methods: {
      //获取筛选后总数据
      get_screen_list: function(ajax_url, json_name, ajaxType) {

        let ajax_data = {
          authId: _this.authId,
          current: 1,
          size: 9999
        }
        _this.popover_loading = true
        getCommonData(ajax_url, ajax_data, ajaxType).then(response => {
          console.log(response)
          if (response.success) {
            _this.selectDateArr.list = response.data.page.records
            console.log(_this.selectDateArr.list)
            _this.popover_loading = false
            _this.$nextTick(() => {
              let id_arr = _this.selectDateArr.id_list
              console.log(_this.$refs)
              _this.$refs.screen_group.setCheckedKeys(id_arr)
            })

          } else {
            _this.popover_loading = false
            _this.$modal.msgError(data.msg)
            // _this.tips_show(data.msg)
          }
        })

      },
      //筛选下拉重置
      popoverReset: function(json_name) {
        _this[json_name].id_str = ''
        _this[json_name].id_list = []
        _this[json_name].currency = ''
        _this.search()
        document.body.click()
      },
      //筛选下拉确定
      popoverSub: function(json_name, id_key, name_key, fid_key, type) {
        let arr = _this.$refs[json_name].getCheckedNodes()
        // console.log(arr)
        let id_list = arr.map(function(item) {
          return item[id_key]
        })

        _this[json_name].id_list = id_list
        _this[json_name].id_str = id_list.join(',')
        _this[json_name].name_str = arr.map(function(item) {
          return item[name_key]
        }).join(',')
        // console.log(_this[json_name].id_str)
        // console.log(_this[json_name].name_str)
        if (type == '01') { //如果是地区
          _this[json_name].id_str = _this[json_name].name_str.replace(/通用/g, '')
        }
        // console.log(_this[json_name].id_str)
        let flist = []
        let screen_num = 0
        if (type == '01') { //如果是地区，后期还得优化，考虑三级地区个数问题
          arr.forEach(function(item) {
            if (item[fid_key] == '' || item[fid_key] == undefined || item[fid_key] == 'undefined' || item[
              fid_key] == 'null') {
              flist.push(item)
              screen_num++
            }
          })
        } else {
          arr.forEach(function(item) {
            if (item[fid_key] == '' || item[fid_key] == undefined || item[fid_key] == 'undefined' || item[
              fid_key] == 'null') {
              flist.push(item)
              screen_num++
            }
          })
        }

        // console.log(flist)
        // console.log(screen_num)
        if (flist.length) {
          arr.forEach(function(item_all) {
            let _this_bl = true
            flist.forEach(function(item) {
              if (item_all[fid_key] == item[id_key]) {
                _this_bl = false
              }
            })
            if (item_all[fid_key] == '' || item_all[fid_key] == undefined || item_all[fid_key] == 'undefined' ||
              item_all[fid_key] == 'null') {
              _this_bl = false
            }
            if (_this_bl) {
              screen_num++
            }
          })
        } else {
          arr.forEach(function(item_all) {
            screen_num++
          })
        }
        _this[json_name].screen_num = screen_num
        if (id_list.length > 1) {
          _this[json_name].screen_bl = true
        } else {
          _this[json_name].screen_bl = false
        }
        _this[json_name].currency = ''
        _this.search()
        document.body.click()
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  /*顶部筛选相关*/
  .screen_item {
    height: 30px;
    box-sizing: border-box;
    padding: 0 10px;
    align-items: center;
    border: 1px solid #E5E5E5;
    margin-left: 10px;
  }

  .screen_con_span {
    align-items: center;
    color: #999999;
  }

  .screen_con_span.ative {
    color: #354168;
  }

  .screen_con_span > img {
    width: 9px;
    margin-left: 2px;
  }

  .screen_all_num {
    color: #999;
    line-height: 28px;
  }

  .reset_but {
    color: #1AA1FB;
    cursor: pointer;
    margin-left: 25px;
    position: relative;
  }

  .reset_but:after {
    content: '';
    height: 12px;
    width: 1px;
    top: 50%;
    margin-top: -6px;
    left: -13px;
    background-color: #ddd;
    position: absolute;
  }

  .popover_loading {
    position: relative;
    height: 200px;
  }

  .popover_loading .loading_content {
    position: absolute;
  }


  /*end of 顶部筛选相关*/
</style>
